.nav-right
  width 420px
  height 100%
  background rgba(250, 250, 250, 0.95)
  border-right 1px solid #e5e8ec
  overflow hidden
  float left
  position relative
  -webkit-user-select none
  -moz-user-select none
  -ms-user-select none
  -o-user-select none
  user-select none
  .title-list
    margin-left 0
    transition margin-left .5s
    &.friend
      margin-left 421px
    form
      height 65px
      border-bottom 1px solid #e5e8ec
      position: absolute;
      top: 0;
      width: 100%;
      .cross
        position absolute
        top 36px
        right 129px
        display none
        &:hover
          cursor pointer
        &:before
          content "\ea0f"
      .search
        width 250px
        margin-top 12px
        padding 20px 0 0 20px
        color #383636
        font-size 18px
        font-family inherit
        background inherit
        border none
        outline none
        &::-webkit-calendar-picker-indicator
          opacity 0
      span
        position absolute
        top 31px
        right 10px
        #tagswitch
          &:checked +#tagsWitchIcon:before
            border-color #64bd63
            box-shadow inset 0 0 0 0.16rem #64bd63
            background-color #64bd63
            -webkit-transition border .4s,box-shadow .4s,background-color 1.2s
            transition border .4s,box-shadow .4s,background-color 1.2s
          &:checked +#tagsWitchIcon:after
            left 27px
            content ''
            width 14px
            height 14px
            position absolute
            top 10px
            -webkit-transform translateY(-50%)
            border-radius 100%
            background-color #91c0f1
            box-shadow 0 1px 1px rgba(0,0,0,.4)
            -webkit-transition left .2s
            transition left .2s
            cursor pointer
        #tagsWitchIcon
          width 40px
          height 14px
          position relative
          z-index 2
          border 0
          background 0 0
          -webkit-appearance none
          outline 0
          &:after{
            left: 0;
            content: '';
            width: 14px;
            height: 14px;
            position: absolute;
            top: 10px;
            -webkit-transform: translateY(-50%);
            border-radius: 100%;
            background-color: #91c0f1;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
            box-shadow: 0 1px 1px rgba(0,0,0,0.4);
            -webkit-transition: left 0.2s;
            -o-transition: left 0.2s;
            transition: left 0.2s;
            cursor: pointer;
          }
          &:before {
            content: '';
            width: 40px;
            height: 14px;
            border: 1px solid #bdcabc;
            background-color: #fdfdfd;
            border-radius: 20px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            -webkit-box-shadow: inset 0 0 0 0 #dfdfdf;
            box-shadow: inset 0 0 0 0 #dfdfdf;
            -webkit-transition: border 0.4s, box-shadow 0.4s;
            -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s;
            transition: border 0.4s, -webkit-box-shadow 0.4s;
            -o-transition: border 0.4s, box-shadow 0.4s;
            transition: border 0.4s, box-shadow 0.4s;
            transition: border 0.4s, box-shadow 0.4s, -webkit-box-shadow 0.4s;
            background-clip: content-box;
          }
    .tags-list
      display none
      margin 15px 10px 15px
      padding 10px
      float left
      background #f1f1f1
      border-radius 25px
      list-style none outside none
      position absolute
      top 65px
      width 100%
      li
        float left
        a
          height 18px
          line-height 18px
          font-size 17px
          float left
          padding 0 5px 0 10px
          color #fff
          position relative
          border-radius 0 5px 5px 0
          margin 5px 9px 5px 8px
          &:before
            content " "
            width 0
            height 0
            position absolute
            top 0
            left -18px
            border 9px solid transparent
            border-right-color #d0d0d0
          &:after
            content " "
            width 4px
            height 4px
            background-color #fff
            border-radius 4px
            box-shadow 0 0 0 1px rgba(0,0,0,.3)
            position absolute
            top 7px
            left 2px
          &.color1
            background  #FF945C
            &:before
              border-right-color #FF945C
          &.color2
            background  #cc8167
            &:before
              border-right-color #cc8167
          &.color3
            background  #BA8F6C
            &:before
              border-right-color #BA8F6C
          &.color4
            background #94635c
            &:before
              border-right-color#94635c
          &.color5
            background #7B5D5F
            &:before
              border-right-color#7B5D5F

    nav, #local-search-result
      clear both
      border-top 1px solid #e5e8ec
      width 100%
      padding-bottom 10px
      color #64717f
      text-shadow -1px 1px 0 rgba(125, 139, 153, 0.1)
      overflow-y auto
      overflow-x hidden
      position absolute
      top 66px
      bottom 0
      -webkit-overflow-scrolling touch
      &::-webkit-scrollbar
        width 3px
      &::-webkit-scrollbar-thumb
        background #309E85
      .search-result-list
        margin-top 0
        padding-left 0
        .search-result
          padding 0 16px 0 32px
          margin 0
          color gray
          .search-keyword
            color red
            font-style normal
      a
        display block
        height 32px
        color  inherit
        position relative
        &:before
          content "\e901"
          position absolute
          top 7px
          left 12px
          z-index 1
          font-size 18px
          color #309E85
        &#top:before
          content "\f08d"
        &.hover:before
          animation wobble 1s linear
        .post-title
          width: -webkit-calc(100% - 155px)
          width: -moz-calc(100% - 155px)
          width: calc(100% - 155px)
          float left
          clear both
          margin 5px 0
          padding-left 32px
          font-size 16px
          line-height 22px
          white-space nowrap
          text-decoration none
          text-overflow ellipsis
          color #55606F
          overflow hidden
          outline none
        .post-date
          font-size 15px
          margin 8px 0
          padding-right 3px
          color #9aa4af
          float right
  .friends-area
    height 100%
    margin-left -421px
    transition margin-left .5s
    position absolute
    &.friend
      margin-left 0
    .friends-title
      height 66px
      text-align center
      vertical-align middle
      display table-cell
      width 420px
      font-size 23px
      border-bottom 2px solid #e5e8ec
      font-weight bold
      .back-title-list
        float right
        padding-right 10px
        &:before
          cursor pointer
          content "\e968"
    .friends-content
      overflow-y auto
      height calc(100vh - 66px)
      a
        line-height 30px
        color #4183c4
